import { SafeAreaView, StyleSheet, Text, View, FlatList, Image, TouchableWithoutFeedback, TouchableOpacity, ActivityIndicator, LogBox } from 'react-native'
import React, { createRef, useRef, useState, useCallback, useEffect, memo, useImperativeHandle } from 'react'
import { pTx } from "../../utils/dimensions"
import httpApi from "../../api"
import { grade } from "../../utils/grade"
import { useNavigation } from '@react-navigation/native';
import ImageEquallyEnlarge from "../../components/imageEquallyEnlarge"
import ImageView from "react-native-image-viewing";



const renderLoadMoreView = (data, total, loading) => {
    return <View style={styles.loadMore}>
        {data.length < total.current || loading.current ?
            <>
                <ActivityIndicator
                    style={styles.indicator}
                    size={"small"}
                    color={"rgba(6, 193, 97, 1)"}
                    animating={true}
                />
                <Text>正在加载更多</Text>
            </>
            : <View >
                <Text>没有更多了</Text>
            </View>
        }
    </View>
}
const getItem = (item, index) => {
    return item[index]
}

export default function hotGroupList(props) {
    const [data, setData] = useState([])
    const total = useRef(0)
    const pageNum = useRef(0)
    const pageSize = useRef(30)
    const loading = useRef(true);
    const [refreshing, setRefreshing] = useState(false);
    const navigation = useNavigation();
    const fetchData = useCallback(async (Refreshing) => {
        try {
            loading.current = true
            console.log(pageNum.current)
            const res = await httpApi.getHotGroupList({ pageNum: pageNum.current, pageSize: pageSize.current })
            loading.current = false
            if (Refreshing) {
                setData(res.data.GroupList);
            } else {
                setData(prevData => [...prevData, ...res.data.GroupList]);
            }
            total.current = res.data.Total
            pageNum.current += 1;
        } catch (error) {
        }
    }, [data]);
    useEffect(() => {
        fetchData()
    }, [])
    // 上拉加载更多
    const loadMore = () => {
        if (!loading.current && data.length < total.current) {
            fetchData();
        } else {
            loading.current = false
        }
    };

    // 下拉刷新
    const refreshList = () => {
        // setRefreshing(true)
        pageNum.current = 0
        fetchData(true).then(() => {
            // setRefreshing(false)
        });
    };
    const RenderItem = ({ item }) => {
        return (
            <TouchableOpacity onPress={() => navigation.navigate('sendGroupJoin', item)} style={styles.renderItem}>
                <Image style={styles.Logo} source={{ uri: httpApi.inline + item.Logo }}></Image>
                <Text style={styles.GroupName} ellipsizeMode={'tail'} numberOfLines={1}>{item.GroupName}</Text>
                <View style={styles.oher}>
                    <View style={styles.NumBox}>
                        <Image style={styles.Icon} source={require('../../assets/image/icon52.png')}></Image>
                        <Text style={styles.NumTyle}>{item.Num}</Text>
                    </View>
                    <View style={styles.NumBox}>
                        <Image style={styles.Icon} source={require('../../assets/image/icon51.png')}></Image>
                        <Text style={styles.NumTyle}>DGE #942</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
    return (
        <FlatList
            data={data}
            refreshing={refreshing}
            keyExtractor={(item, index) => index}
            renderItem={RenderItem}
            onEndReached={loadMore}
            onRefresh={refreshList}
            numColumns={2}
            onEndReachedThreshold={0.5}
            columnWrapperStyle={styles.columnWrapper}
            ListFooterComponent={() => renderLoadMoreView(data, total, loading)}
        />
    )
}

const styles = StyleSheet.create({
    columnWrapper: {
        justifyContent: 'space-around',
    },
    renderItem: {
        marginBottom: pTx(8),
        width: pTx(169),
        height: pTx(135),
        padding: pTx(16),
        borderWidth: 1,
        borderColor: "rgba(5, 153, 77, 0.06)",
        elevation: 1.5,
        shadowColor: "rgba(5,153,77,0.1)",
        shadowOffset: { width: 1, height: 1 },
        shadowOpacity: 0,
        shadowRadius: 0,
        borderRadius: pTx(8),
    },
    Logo: {

        width: pTx(47),
        height: pTx(47),
        borderRadius: pTx(8),
    },
    GroupName: {
        marginTop: pTx(10),
        fontSize: pTx(16),
        color: "rgba(10, 12, 20, 1)"
    },
    oher: {
        marginTop: pTx(5),
        flex: 1,
        flexDirection: 'row',
        alignItems: "center",
        justifyContent: "space-between"
    },
    NumBox: {
        flexDirection: 'row',
        alignItems: "center",
    },
    Icon: {
        height: pTx(11),
        width: pTx(11),
    },
    NumTyle: {
        marginLeft: pTx(3),
        fontSize: pTx(12),
        color: "rgba(175, 181, 189, 1)"
    },
    loadMore: {
        alignItems: "center",
        paddingVertical: pTx(10)
    },
    indicator: {
        paddingBottom: pTx(5),
    },
})